


html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: Helvetica, sans-serif;
}

.hidden {
    display: none;
}

.screen_centered {
    top: 50%;
    left: 50%;
    position: absolute;
    padding: 0px 20px 10px;
    width: 200px;
    margin: -55px 0 0 -100px;
    background-color: #CCC;
}

#settings {
    .screen_centered;
    #close_settings {
        display: block;
        float: right;
        margin-top: 20px;
    }
    p {
         margin : 0;
    }
    .small {
        font-size: 80%;
        color: #777;
        margin-bottom: 10px;
    }
}

#loading {
    top: 50%;
    left: 50%;
    padding: 20px 0px;
    width: 200px;
    margin: -55px 0 0 -100px;
    text-align: center;
    position: absolute;
    text-align: center;
    background-color: #CCC;
}


#grid {
    position: absolute;
}

#map, #canvas_test {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
}

#wrap {
    width: 960px;
    margin: 0 auto;
}

.adjust {
    left: 100px;
    right: 100px;
}
.toolbar {
    background-color: #CCC;
}

#header {
    .adjust;
    .toolbar;
    padding: 0.4em 0;
    position: absolute;
    top: 0;
    h1 {
        line-height: 1em;
        padding: 0;
        margin: 0 0 10px 20px;
        font-size: 18px;
    }
    #breadcumbs {
        font-size: 12px;
        margin: 0px 0 0 20px;
        #back {
            margin-right: 5px;
        }
    }
}

.cell_wrap {
    height: 100%;
    text-align: center;
    font-size: 10px;
    position: relative;
    color: white;
    .progress {
        position: absolute;
        text-align: center;
        top: 50%;
        height: 12px; 
        width: 100%;
        .data {
            position: relative;
            top: -50%;
            width: 50%;
            margin: 0 auto;
        }
    }
}


#toolbar {
    .adjust;
    .toolbar;
    position: absolute;
    bottom: 0;
    padding: 0em 0;
    
    

    #map_selection_wrapper {
        width: 10%;
        float: left;
        padding: 1em 0;
    }
        
    #slider_wrapper {
        float: left;
        width: 35%;
        #slider {
            margin-left: 20px;
            font-size: 12px;
            width: 85%;
        }
        #slider_values {
            font-size: 10px;
            margin-left: 20px;
            color: #AAA;
        }
        padding: 1em 0;
    }
    #polygon_tools {
        float: left;
        width: 30%;
        #degradation {
            float: left;
        }
        #deforestation {
            float: left;
        }
        padding: 1em 0;
    }
    #actions {
        background-color: #bbb;
        float: left;
        width: 25%;
        padding: 1em 0;
        #done {
            float: right;
            margin-right: 10px;
        }
    }
    
    .button {
        float: left;
        background-color: #09c;
        padding: 5px 10px;
        font-size: 10px;
        margin-left: 5px;
        color: white;
        text-decoration: none;
        text-transform: uppercase;
        &:hover { 
            background-color: #06a;
        }
    }
    .selected {
        background-color: #348;
    }
    
}
